<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>A使用jsx创建虚拟DOM.html</title>
</head>
<body>

<div id="test">

</div>


<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">
    // 虚拟dom，这个是jsx
    // const vDom = <h1 id="title"><span>hello,react</span></h1>


    /*
    const vDom = React.createElement(
            "h1", {id:"title"},
            React.createElement("span",{},"hello,react")
    )
     */
    const vDom = ( //它会把这个翻译成 上面的
            <h1 id="title"><span>hello,react</span></h1>
    )




    ReactDOM.render(vDom, document.getElementById("test"))
</script>
</body>
</html>